<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
    body{
        margin: 0;
        padding: 0;
    }
    .cover{
        /*min-width: 700px;*/
        width: 100%;
        /*height: 1000px;*/
        background-color: #f2c1f1;
        position: relative;
    }
    .heder{
        width: 80%;
        background-color: #3B79ED;
        height: 100px;
    }
    video{
        width: 100%;
        object-fit: contain;
    }
    .box{
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        margin: auto;
        width: 1400px;
        height: 100%;
        background-color: #3aff75;
    }
    .footer{
        position: absolute;
        bottom: 30px;
        
        width: 100%;
        height:500px;
        background-color: #faa;         
    }


</style>
</head>
<body>
    <div class="cover">
        <video loop autoplay>
            <source src="monky.mp4" />
        </video>
        <div class="box">
            <header class="heder"></header>
            <div class="footer">
                <ul>
                    <li class="list"></li>
                    <li class="list"></li>
                    <li class="list"></li>
                </ul>
            </div>
        </div>



    </div>



</body>
</html>